<template>
	<view class="lines" :style="{ marginTop: styles.marginTB + 'px', marginBottom: styles.marginTB + 'px' }">
		<view v-if="styles.type==1" :style="{background:styles.colorBg, height: styles.height + 'px' }"></view>
		
		<view class="two" v-if="styles.type==2" :style="{borderColor:styles.colorBg, height: styles.height + 'px' }"></view>
		
		<view class="free" v-if="styles.type==3" :style="{borderColor:styles.colorBg, height: styles.height + 'px' }"></view>
		
		<view class="six" v-if="styles.type==4" :style="{borderColor:styles.colorBg, height: styles.height + 'px' }"></view>
	</view>
</template>
<script>
export default {
	name: 'lines',
	data() {
		return {};
	},
	methods: {},
	props: ['styles']
};
</script>
<style lang="scss" scoped>
.lines {
	.one{
		
	}
	.two{
		border: 1px solid;
	}
	.free{
		border: 1px dashed ;
	}
	.six{
		border: 1px dotted;
	}
}
</style>
